<template>
  <div class="othercomment">
    <div class="userinfo">
      <div class="userimg">
        <slot name="userimg"></slot>
      </div>
      <div class="rightinfo">
        <div class="top">
          <span ref="userName" :class="{ userName: true, changeStyle: isadmin }">
            <slot name="userName"></slot>
          </span>
          <!-- 回复的对象 -->
          <span style="color: rgb(37, 41, 51)">回复</span>
          <span> <slot name="commentPoint"></slot>: </span>
          <!-- 回复内容 -->
          <span class="replyContent" ref="commentCont">
            <slot name="replyContent"></slot>
          </span>
        </div>
        <div class="fbTime">
          <p>
            <slot name="fbTime"></slot>
          </p>
          <div class="btn" :class="{ btnActive: showInput }" @click.stop="reply">
            <i class="iconfont icon-pinglun"></i><span>{{ commentTxt }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="commentInput" v-show="showInput" @click.stop>
      <!-- 评论框 -->
      <div class="inputBar">
        <el-input :placeholder="hint" style="margin-bottom: 10px" v-model="firstComments" maxlength="50" show-word-limit> </el-input>
        <button @click="sumbit" :disabled="!firstComments">确定</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const $emit = defineEmits(['replyOther', 'handleReply'])
const props = defineProps({
  ceid: {
    type: String
  },
  commentPoint: {
    type: String
  },
  isadmin: {
    type: Boolean
  },
  showIpt: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number
  }
})
const firstComments = ref('')
const showInput = ref(false)
const hint = ref('请输入评论')
const userName = ref<any>(null)
const commentCont = ref<any>(null)
const commentTxt = ref('回复')
const reply = () => {
  $emit('handleReply')
}
const sumbit = () => {
  //需要回复用户的昵称
  let replyUser = {
    name: userName.value.valueinnerHTML,
    ceId: props.ceid,
    isadmin: props.isadmin,
    oldreplyCon: commentCont.value.innerHTML,
    firstComments: firstComments.value,
    commentPoint: props.commentPoint
  }
  $emit('replyOther', replyUser)
}
watch(
  () => props.showIpt,
  (newVal) => {
    showInput.value = newVal
    if (!showInput.value) {
      commentTxt.value = '回复'
    } else {
      commentTxt.value = '取消回复'
      hint.value = `回复:${props.commentPoint}`
    }
  },
  { immediate: true }
)
</script>
<style lang="scss" scoped>
.othercomment {
  padding: 15px 0px 0px 0;
  color: #606266;
  font-size: 16px;
  // background-color: #f3f3f3;

  // 用户信息
  .userinfo {
    display: flex;
    margin-bottom: 0px;
    min-height: 50px;

    .userimg {
      display: flex;
      margin-bottom: auto;
      margin-right: 15px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      ::v-deep(img) {
        width: 28px;
        height: 28px;
      }
    }

    .rightinfo {
      flex: 1;
      width: 0;
      overflow: hidden;
      word-break: break-all;

      .top {
        margin-bottom: 8px;
      }
    }
  }
}

//用户昵称
.userName {
  color: rgb(81, 87, 103);
  // color: #606266;
  // font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.changeStyle {
  color: rgb(251, 114, 153);
}

//发布时间
.fbTime {
  display: flex;
  align-items: center;

  p {
    font-size: 14px;
    color: rgb(138, 145, 159);
    margin: 0;
  }

  .btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 14px;
    width: 45px;
    text-align: center;
    line-height: 14px;
    font-size: 14px;
    white-space: nowrap;
    color: rgb(37, 41, 51);
    margin-left: 5px;
    border-radius: 2px;
    margin-left: 10px;

    span {
      margin-left: 5px;
    }

    &:hover {
      color: #1e80ff;
    }
  }

  .btnActive {
    color: #1e80ff;
  }
}

.replyContent {
  font-size: 16px;
  color: rgb(37, 41, 51);
}

/* 评论框 */
.commentInput {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // background-color: rgb(248, 248, 248);
  height: 55px;
  border-radius: 5px;

  .inputImg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 20px;
    overflow: hidden;
  }

  .inputBar {
    display: flex;
    justify-content: space-between;
    flex: 1;

    .el-input {
      margin-bottom: 0 !important;
    }

    button {
      box-sizing: border-box;
      width: 120px;
      border: 0;
      margin-left: 20px;
      border-radius: 5px;
      font-size: 16px;
      color: #fff;
      background-color: #1e80ff;
      cursor: pointer;
      letter-spacing: 2px;

      &:hover {
        font-weight: 600;
      }

      &:disabled {
        background-color: #abcdff;
        cursor: not-allowed;
      }
    }
  }
}
</style>
